<template>
	<gui-page class="container">
		<view slot="gBody">
			<view class="header">
				<view class="gui-flex gui-align-items-center gui-space-between">
					<view>歡迎使用,蘭蔻！</view>
					<view>
						<text class="mr20 gui-icons" @click="onBnt(1)">&#xe666;</text>
						<text class="mr20 gui-icons" @click="onBnt(2)">&#xe614;</text>
						<gui-popup-menu @hideMenu="hideMenu" ref="gracePopupMenu" arrowDirection="right">
							<view class="menus-warp" style="border-radius: 8rpx; padding: 15rpx">
								<text class="menus gui-block-text" @tap.stop="onBnt(3)">刷新状态</text>
								<text class="menus gui-block-text" @tap.stop="onBnt(4)">收益报表</text>
								<text class="menus gui-block-text" @tap.stop="onBnt(5)">充值续费</text>
								<text class="menus gui-block-text" @tap.stop="onBnt(6)">更改密码</text>
								<text class="menus gui-block-text" @tap.stop="onBnt(7)">退出登录</text>
							</view>
						</gui-popup-menu>
					</view>
				</view>
				<view class="username">test123</view>
			</view>
			<view class="bnts">
				<view class="bnt-item">
					<view class="gui-bold">¥0元/0次</view>
					<view class="">秒搶總收益</view>
					<view class="line-color1"></view>
				</view>
				<view class="bnt-item">
					<view class="gui-bold gui-color-red">100</view>
					<view class="">當前點數</view>
					<view class="line-color2"></view>
				</view>
				<view class="bnt-item">
					<view class="gui-bold">¥0元/0次</view>
					<view class="">尾搶總收益</view>
					<view class="line-color1"></view>
				</view>
			</view>

			<gui-speaker class="gui-box-title" :vertical="false" :items="speakerMsgs">
				<text slot="icon" class="gui-icons color-msg">&#xe656;</text>
			</gui-speaker>

			<view class="bnts">
				<view :class="['bnt-item2', 'bts1', { start: isStart }]" @click="isStart = !isStart">
					{{ isStart ? "總開關已啓動" : "總開關未啓動" }}
				</view>
				<view class="bnt-item2 bts2"> 充值續費 </view>
				<view :class="['bnt-item2', 'bts1', { start: isStart2 }]" @click="check">
					單透已開啓
				</view>
			</view>

			<view class="content">
				<view class="c-item" v-for="(item, index) in dataList" :key="index">
					<image class="bg-img" mode="aspectFill"
						src="" />
					<view class="c-info">
						<view class="c-title"> 請掃碼綁定 </view>
						<view class="c-money">
							當前收益:{{ item.num }}次/
							<text class="gui-color-red gui-bold">{{ item.price }}元</text>
						</view>

						<!-- <picker ref="mpvuePicker" @change="pickerChange($event,'num1i')" :value="num1i" :range="numList1"
						range-key="label"> -->
						<view class="p-bnt" @click="onsaoma(item)"> 掃碼登錄 </view>
						<!-- </picker> -->
					</view>
				</view>

				<view class="bnt-add" @click="onBnt(8)">
					<text class="gui-icons mr10">&#xe6c7;</text>
					<text>添加新賬號</text>
				</view>
			</view>

			<gui-popup ref="guipopup" :width="'80vw'">
				<view class="popup-box" v-if="popupType == 1">
					<view class="popup-header">
						<text>扫码续费</text>
					</view>
					<view class="popup-content gui-border-t">
						<input v-model="priceCode" placeholder="请输入授权码" />
					</view>
					<view class="botton-box">
						<view @click="onClose" class="close-box">取消</view>
						<view class="success" @click="confirmUpGoods">确定</view>
					</view>
				</view>

				<view class="popup-box" v-if="popupType == 2">
					<view class="popup-header gui-border-b">
						<text>更改登录密码</text>
					</view>
					<view style="padding:0 20rpx">
						<view class="popup-content  gui-flex gui-align-items-center">
							<text class="gui-flex1">旧密码</text>
							<input v-model="priceCode" placeholder="请输入旧密码" class="gui-flex1" />
						</view>
						<view class="popup-content gui-border-t gui-flex gui-align-items-center">
							<text class="gui-flex1">新密码</text>
							<input v-model="priceCode" placeholder="请输入新密码" class="gui-flex1" />
						</view>
						<view class="popup-content gui-border-t gui-flex gui-align-items-center">
							<text class="gui-flex1">确认密码</text>
							<input v-model="priceCode" placeholder="请输入确认密码" class="gui-flex1" />
						</view>
					</view>
					<view class="botton-box">
						<view @click="onClose" class="close-box">取消</view>
						<view class="success" @click="confirmUpGoods">确定</view>
					</view>
				</view>

				<view class="popup-box" v-if="popupType == 3">
					<view class="popup-header">
						<text>温馨提示</text>
					</view>
					<view class="popup-c gui-border-t">
						绑定新账号坑位，需要扣100点，是否继续？
					</view>
					<view class="botton-box">
						<view @click="onClose" class="close-box">取消</view>
						<view class="success" @click="confirmUpGoods">确定</view>
					</view>
				</view>
				
				<view class="popup-box" v-if="popupType == 4">
					<view class="popup-header">
						<text>扫描二维码</text>
					</view>
					<view class="popup-warp gui-border-t">
						<image class="p-img" mode="aspectFit" src="../../static/image/code2.png"></image>
					
					<view class="p-top">二维码将在 {{time}} 秒后超时失效</view>
					<view class="p-waring">
						温馨提示:请用手机打开微信扫一扫使用摄像头扫码登陆,禁止截屏保存到手机识别操作!
					</view>
					</view>
					<view class="p-bnt" @click="onClose">
						关闭
					</view>
				</view>
			</gui-popup>

			<city @city="selCity" ref="citySel"></city>
		</view>
	</gui-page>
</template>

<script>
	import state from "@/config";
	import city from "./city.vue"

	export default {
		name: "index",
		components: {
			city
		},
		data() {
			return {
				isLogin: !!state.isLogin(),
				userInfo: {},
				speakerMsgs: [],
				dataList: [],
				isStart: false,
				isStart2: false,
				diqu: [],
				menuList1: [{
					label: "",
					id: 1
				}],
				menui: 0,
				priceCode: "",
				popupType: null,
				time:200,
				timer:null,
			};
		},
		onShow() {},
		onLoad() {
			this.init();
		},
		onTabItemTap: function (item) {
		  console.log(item)
		},
		methods: {
			pickerChange(e, t) {
				let i = e.detail.value;
				this[t] = i;
				switch (t) {
					case "quni":
						break;
				}
			},
			hideMenu() {
				this.$refs.gracePopupMenu.close();
			},
			check() {
				if (!this.isStart) {
					this.isStart2 = !this.isStart2;
				}
			},

			confirmUpGoods() {
				console.log(this.priceCode, this.popupType);
				this.onClose();
			},
			onClose() {
				this.$refs.guipopup.close();
				if(this.popupType == 4){
					clearInterval(this.timer)
				}
			},
			onsaoma(item) {
				this.$refs.citySel.show(item.id)
			},
			// 城市选择
			selCity(o) {
				console.log(o)
				this.popupType = 4;
				this.$refs.guipopup.open();
				this.time = 200;
				this.timer = setInterval(()=>{
					this.time --;
					if(this.time == 0){
						this.$refs.guipopup.close();
						clearInterval(this.timer)
					}
				},1000)
			},
			getData() {
				uni.showLoading({
					title: "加载中",
				});
				//   this.$api.courseList({}, (e) => {
				// e = e || {};
				let e = {
					records: [{
							num: 1,
							price: 2,
							id: 1
						},
						{
							num: 1,
							price: 2,
							id: 1
						},
						{
							num: 1,
							price: 2,
							id: 1
						},
						{
							num: 1,
							price: 2,
							id: 1
						},
						{
							num: 1,
							price: 2,
							id: 1
						},
					],
				};
				uni.hideLoading();
				let demoArr = e.records || [];
				if (this.pageNum >= 2) {
					this.dataList = this.dataList.concat(demoArr);
				} else {
					this.dataList = [];
					this.dataList = demoArr;
				}
				//   });
				this.isRefresher = false;
			},

			onBnt(t) {
				switch (t) {
					case 1:
						this.$uni.navigate("/pages/magess/index");
						break;
					case 2:
						this.$refs.gracePopupMenu.open();
						break;
					case 3:
						this.hideMenu();
						this.getData();
						break;
					case 4:
						this.hideMenu();
						this.$uni.navigate("/pages/index/income");
						break;
					case 5:
						this.hideMenu();
						this.popupType = 1;
						this.$refs.guipopup.open();
						break;
					case 6:
						this.hideMenu();
						this.popupType = 2;
						this.$refs.guipopup.open();
						break;
					case 7:
						this.hideMenu();
						this.$uni.navigate("/pages/login/login", 'reLaunch');
						break;
					case 8:
						this.popupType = 3;
						this.$refs.guipopup.open();
						break;
				}
			},

			init() {
				// 最新公告
				this.speakerMsgs = [{
						id: 1,
						title: "公告123发发士大夫额发的",
					},
					{
						id: 2,
						title: "公告123发发士大夫额发的",
					},
					{
						id: 3,
						title: "公告123发发士大夫额发的",
					},
					{
						id: 4,
						title: "公告123发发士大夫额发的",
					},
				];
				//   this.$api.newMessage(
				//     {
				//       pages: 1,
				//       size: 3,
				//     },
				//     (e) => {
				//       e = e || {};
				//       let res = e.records || [];
				//       this.speakerMsgs = res.map((item) => {
				//         let v = this.$uni.toDate(this.$uni.toTimeStamp(item.publishTime));
				//         return {
				//           id: item.id,
				//           title: item.title,
				//           url: `/pagesB/index/newsDetail?id=${item.id}`,
				//           opentype: "navigate",
				//           time: v[0] ? `${v[0]}/${v[1]}/${v[2]}` : "",
				//         };
				//       });
				//     }
				//   );

				// 获取用户信息
				//   if (state.storage(["user_info", "id"]))
				//     this.$api.getUseInfo({}, (e) => {
				//       e = e || {};
				//       let userInfo = state.storage(["user_info"]);
				//       this.userInfo = Object.assign({}, userInfo, e);
				//     });
				this.getData();
			},

			// 下拉刷新被触发
			refresherrefreshFun() {
				this.dataList = [];
				this.pageNum = 1;
				this.getData();
			},

			//上拉加载，页面滑动到底部加载分页数据
			scrolltolowerFun() {
				if (this.dataList.pages > this.pageNum) {
					this.pageNum = this.pageNum + 1;
					this.getData();
				}
			},

			refresherpullingFun() {
				this.isRefresher = true;
			},

			navigateTo({
				currentTarget: {
					dataset
				}
			}) {
				let nowisLogin = state.isLogin();
				let that = this;
				const {
					url,
					type,
					islogin
				} = dataset;
				if (islogin == "1" && !nowisLogin) {
					uni.showModal({
						title: "提示",
						content: "请先登录！",
						cancelText: "暂不登录",
						confirmText: "登录",
						cancelColor: "#BDBDBD",
						confirmColor: "#D33C30",
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: "/pages/login/login",
								});
							} else if (res.cancel) {
								uni.switchTab({
									url: "/index/indexs/index",
								});
							}
						},
					});
				} else {
					this.$uni.navigate(url, type);
				}
			},
		},
	};
</script>

<style scoped lang="less">
	.container {
		width: 100%;
		min-height: calc(100vh - 100rpx);
		background: url() no-repeat top right,
			url() no-repeat bottom left;
		background-color: #f9f9f9;
		max-width: 750rpx;
		margin: 0 auto;

		.header {
			padding: 10rpx 24rpx 0 24rpx;
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}

		.mr20 {
			margin-right: 20rpx;
		}

		.username {
			margin: 10rpx 0 30rpx 0;
		}
	}
	.gui-box-title {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		color: #ff6010;
		padding: 10rpx 20rpx;
		margin: 20rpx 0;
		background-color: #fff9ed;

		.color-msg {
			margin-right: 10rpx;
		}
	}

	.bnts {
		display: flex;
		padding-left: 20rpx;

		.bnt-item {
			margin-right: 20rpx;
			flex: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			border-radius: 16rpx;
			padding: 10rpx 24rpx 0 24rpx;
			background-color: #fff;
			text-align: center;
			color: #282f3e;
			font-size: 24rpx;

			.gui-bold {
				font-size: 30rpx;
			}

			.line-color1 {
				height: 8rpx;
				background-color: #f19ca3;
				margin-bottom: 10rpx;
				border-bottom-left-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
				margin-top: 6rpx;
			}

			.line-color2 {
				height: 8rpx;
				background-color: #1c2d66;
				margin-bottom: 10rpx;
				border-bottom-left-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
				margin-top: 6rpx;
			}
		}

		.bnt-item2 {
			margin-right: 20rpx;
			flex: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			border-radius: 30rpx;
			padding: 20rpx 0;
			background-color: transparent;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}

		.bts1 {
			background-color: #9c9c9c;
		}

		.start {
			background-color: #00b578;
		}

		.bts2 {
			background-color: #1c2d66;
		}

		.bts3 {
			background-color: #00b578;
		}

		.bts4 {
			background-color: #95dec5;
		}
	}

	.menus-warp {
		background-color: #fff;

		.menus {
			line-height: 88rpx;
			font-size: 28rpx;
			margin-left: 30rpx;
			text-align: left;
		}
	}

	.content {
		margin-top: 20rpx;
		border-radius: 8rpx;
		padding: 15rpx;

		.c-item {
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			margin: auto 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;

			.bg-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.c-title {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.p-bnt {
				margin-top: 10rpx;
				padding: 6rpx 0;
				color: #ffffff;
				background-color: #1c2d66;
				text-align: center;
				width: 150rpx;
				font-size: 26rpx;
				border-radius: 20rpx;
			}
		}
	}

	.bnt-add {
		width: 80%;
		margin: 30rpx auto;
		text-align: center;
		padding: 20rpx 0;
		border: 1px solid #1c2d66;
		font-size: 30rpx;
		border-radius: 10rpx;
		color: #1c2d66;
	}

	.popup-box {
		max-height: 70vh;
		border-radius: 10rpx;
		background-color: #fff;
		overflow: hidden;

		.price {
			color: #d63131;
		}
		
		.popup-warp{
			padding: 0 24rpx 24rpx;
			max-height: 70vh;
			overflow-x: hidden;
			overflow-y: auto;
			font-size: 30rpx;
			color: #333333;
			display: flex;
			flex-direction: column;
			align-items: center;
			.p-img{
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
			}
			.p-top{
				margin: 20rpx 0;
			}
			.p-waring{
				color: #ff0000;
			}
		}
			.p-bnt{
				margin: 20rpx;
				border-radius: 10rpx;
				background-color: #1c2d66;
				color: #fff;
				line-height: 70rpx;
				text-align: center;
				font-size: 30rpx;
			}

		.popup-header {
			position: relative;
			width: 100%;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			background-color: #ffffff;
			font-size: 30rpx;
			font-weight: bold;
		}

		.popup-content {
			line-height: 80rpx;
			padding: 20rpx;
		}
		.popup-c{
			padding: 20rpx;
		}

		.botton-box {
			display: flex;

			view {
				width: 50%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				border-top: 2rpx solid #1c2d66;
			}

			.success {
				border-left: 2rpx solid #1c2d66;
				color: #1c2d66;
				font-weight: bold;
			}
		}

		.close-box {
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-top: 2rpx solid #1c2d66;
			font-size: 30rpx;
			color: #171717;
		}
	}
</style>